<template>
  <TableForm
    v-model:loading="loading"
    :columns="columns"
    :form-columns="formColumns"
    :data="tableData"
    :total="tableTotal"
    :pagination="pagination"
    @open-form="onOpenForm"
    @fetch="onFetch"
    row-key="path"
    :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
  >
    <template v-slot:column>
      <el-table-column
        v-for="(column, index) in columns"
        :key="index"
        :type="column.type"
        :prop="column.prop"
        :label="column.label"
        :width="column.width"
        :show-overflow-tooltip="column.showOverflowTooltip"
      >
        <template v-if="column.prop === 'title'" #default="{ row }">
          <SvgIcon :name="row.meta.icon" />
          <span class="ml10">{{ $t(row.meta.title) }}</span>
        </template>

        <template v-else-if="column.prop === 'xx'" #default="{ row }">
          <el-tag type="success" size="small">{{ row['xx'] }}菜单</el-tag>
        </template>

        <template v-else-if="column.prop === 'action'" #default="{ row, $index }">
          <el-button
            :disabled="row.roleSign === 'admin'"
            size="small"
            text
            type="primary"
            @click="onOpenForm('edit', row)"
          >
            修改
          </el-button>
          <el-button
            :disabled="row.roleSign === 'admin'"
            size="small"
            text
            type="danger"
            @click="onDelRow(row, $index)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </template>
  </TableForm>
  <!--组件-->
  <MenuDialog ref="menuDialogRef" @refresh="onFetch()" />
</template>

<script setup lang="ts" name="systemRole">
import { ref, defineAsyncComponent, onMounted } from 'vue'
import TableForm from '@/components/TableForm/TableForm.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { storeToRefs } from 'pinia'
import { useRoutesList } from '@/stores/routesList'

// 引入组件
const MenuDialog = defineAsyncComponent(() => import('@/views/system/menu/MenuDialog.vue'))

// 状态机
const stores = useRoutesList()
const { routesList } = storeToRefs(stores)
// 编辑
const menuDialogRef = ref()
// 加载
const loading = ref(false)
// 表格数据
const tableData = ref<any[]>([])
// 表格总数
const tableTotal = ref(0)
// 筛选列
const formColumns = ref<FormColumn[]>([
  {
    type: 'string',
    label: '输入框',
    prop: 'title',
    props: {
      placeholder: '输入框'
    }
  },
  {
    type: 'boolean',
    label: '开关',
    prop: 'status',
    props: {
      inlinePrompt: true,
      activeText: '开启',
      inactiveText: '关闭'
    }
  }
])
// 表格列
const columns = ref<TableFormColumn[]>([
  { type: 'selection', label: '', width: 38 },
  { type: 'index', label: '#', width: 50 },
  { prop: 'title', label: '菜单名称', showOverflowTooltip: true },
  { prop: 'path', label: '路由路径', showOverflowTooltip: true },
  { prop: 'meta.roles', label: '权限标识', showOverflowTooltip: true },
  { prop: 'xx', label: '类型', showOverflowTooltip: true },
  { prop: 'action', label: '操作', width: 100 }
])
// 分页
const pagination = ref<TableFormPagination>({
  page: 1,
  pageSize: 10
})

/**
 * 初始化表格数据
 * @param params
 */
const onFetch = (params?: any) => {
  params && console.log('onFetch', params)
  loading.value = true
  tableData.value = routesList.value
  tableTotal.value = routesList.value.length
  setTimeout(() => {
    loading.value = false
  }, 500)
}

/**
 * 打开表单
 * @param type
 * @param row
 */
const onOpenForm = (type: string, row?: any) => {
  menuDialogRef.value && menuDialogRef.value.openDialog(type, row)
}

/**
 * 删除角色
 * @param row
 * @param index
 */
const onDelRow = (row: RowRoleType, index: number) => {
  ElMessageBox.confirm(`此操作将永久删除角色名称：“${row.roleName}”，是否继续?`, '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      tableData.value.splice(index, 1)
      // onFetch()
      ElMessage.success('删除成功')
    })
    .catch(() => {})
}
// 页面加载时
onMounted(() => {
  onFetch()
})
</script>
